<template>
    <div class="app-container">
        <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
                  style="width: 100%">

          <el-table-column align="center" :label="$t('table.showId')" width="65">
            <template slot-scope="scope">
              <span>{{scope.row.showId}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="授权号">
            <template slot-scope="scope">
              <span>{{scope.row.contractRightsNo}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="版权号">
            <template slot-scope="scope">
              <span>{{scope.row.copyrightsNo}}</span>
            </template>
          </el-table-column>


          <el-table-column align="center" label="出版社">
            <template slot-scope="scope">
              <span>{{scope.row.publishingName}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="作品名称">
            <template slot-scope="scope">
              <span>{{scope.row.worksName}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="合同编号">
            <template slot-scope="scope">
              <span>{{scope.row.contractNo}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="到期状态">
            <template slot-scope="scope">
              <span>{{scope.row.expireStatus}}</span>
            </template>
          </el-table-column>


          <el-table-column align="center" label="授权状态">
            <template slot-scope="scope">
              <span>{{scope.row.statis | $statusFilter}}</span>
            </template>
          </el-table-column>


          <el-table-column align="center" label="开始时间">
            <template slot-scope="scope">
              <span>{{scope.row.beginDate | $dateConvert}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="终止时间">
            <template slot-scope="scope">
              <span>{{scope.row.endDate | $dateConvert}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="合作形式">
            <template slot-scope="scope">
              <span>{{scope.row.balanceType | $balanceTypeFilter}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="独家授权">
            <template slot-scope="scope">
              <span>{{scope.row.soleFlag | $ynFilter}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="转授权">
            <template slot-scope="scope">
              <span>{{scope.row.subRightsFlag | $tfFilter}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="原始版权">
            <template slot-scope="scope">
              <span>{{scope.row.originalCopyrightsFlag | $tfFilter}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作人">
            <template slot-scope="scope">
              <span>{{scope.row.modifier}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="修改时间">
            <template slot-scope="scope">
              <span>{{scope.row.modifyTime | $dateConvert("YYYY-MM-DD HH:mm:ss")}}</span>
            </template>
          </el-table-column>


            <el-table-column align="center" :label="$t('table.actions')" width="200" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button v-has="'contractRightsTable_info'" type="info" size="mini" @click="handleInfo(scope.row,'info')">{{$t('table.info')}}</el-button>

                <el-button v-if="scope.row.statis=='VALID'" v-has="'contractRightsTable_disable'" size="mini" type="danger" @click="handleInvalid(scope.row,'invalid')">{{$t('table.invalid')}}</el-button>
              </template>
            </el-table-column>
        </el-table>


    </div>
</template>

<script>
    import { fetchContractRightsList, invalidContractRights } from '@/api/contractRights/contractRights'
    import waves from '@/directive/waves' // 水波纹指令
    import { parseTime } from '@/utils'

    export default {
      name: 'ContractRightsList',
      directives: {
        waves
      },
      // 接收父组件的值
      props: {
        copyrightsId: String,
        contractNo: String,
        required: true
      },
      data() {
        return {
          tableKey: 0,
          list: null,
          total: null,
          listLoading: true,
          page: {
            page: 1,
            limit: 20,
            sort: ''
          },
          listQuery: {
            compoundSearch: undefined,
            expireStatus: undefined,
            clearMethod: undefined,
            contractNo: this.contractNo
          },
          dialogFormVisible: false,
          dialogStatus: '',
          textMap: {
            update: '修改',
            create: '新增',
            info: '详情'
          },
          dialogPvVisible: false,
          pvData: [],
          rules: {
          },
          downloadLoading: false
        }
      },
      filters: {

      },
      created() {
        this.getList()
        // this.getExpireOption();
      },
      methods: {
        getList() {
          this.listLoading = true
          this.listQuery.includeInvalid = true
          fetchContractRightsList(this.listQuery).then(response => {
            if (response.success) {
              this.list = response.content
              // this.total = response.content.total
              this.listLoading = false
            } else {
              this.$message({
                type: 'fail',
                message: response.message
              })
            }
          })
        },
        // getExpireOption() {
        //   this.listLoading = true
        //   fetchContractList(this.listQuery).then(response => {
        //     if (response.success) {
        //       this.list = response.content
        //       // this.total = response.content.total
        //       this.listLoading = false
        //     } else {
        //       this.$message({
        //         type: 'fail',
        //         message: response.message
        //       })
        //     }
        //   })
        // },
        // 搜索按钮
        handleFilter() {
          this.listQuery.page = 1
          this.getList()
        },
        // 跳转页数
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.getList()
        },
        // 详情
        handleInfo(row, status) {
          const id = row.id
          this.$router.push({ name: 'contractRightsInfo', query: { id: id, opt: 'info' }})
        },
        // 跳转新增页面
        handleCreate() {
          this.$router.push({ name: 'contractRightsAdd' })
        },
        // 更新页面
        handleUpdate(row) {
          const id = row.id
          this.$router.push({ name: 'contractRightsEdit', query: { id: id }})
        },
        // 删除操作
        // handleDelete(row) {
        //   this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //   }).then((response) => {
        //     // 调用删除接口
        //     var p = { id: row.id }
        //     deleteContractRights(p).then(response => {
        //       if (response.success) {
        //         this.getList()
        //         this.$message({
        //           type: 'success',
        //           message: '删除成功!'
        //         })
        //       } else {
        //         this.$message({
        //           type: 'fail',
        //           message: response.message
        //         })
        //       }
        //     })
        //   }).catch(() => {
        //     this.$message({
        //       type: 'info',
        //       message: '已取消删除'
        //     })
        //   })
        // },
        // 失效操作
        handleInvalid(row) {
          this.$confirm('失效后，该条数据不可操作，确认失效?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then((response) => {
            // 调用失效接口
            var p = { id: row.id }
            invalidContractRights(p).then(response => {
              if (response.success) {
                this.getList()
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                })
              } else {
                this.$message({
                  type: 'fail',
                  message: response.message
                })
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
        },
        batchInvalid() {
          // TODO 批量失效
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => {
            if (j === 'timestamp') {
              return parseTime(v[j])
            } else {
              return v[j]
            }
          }))
        }
      }
    }
</script>
